<template>
  <div class="interface-box">
    <div class="warn-text"><span class="el-icon-info"></span>调用API接口时，需要用到账户ID和SecretKey进行鉴权验证</div>
    <h5>API访问凭证</h5>
    <el-form class="m7-form clearfix" :model="configData" label-position="top" size="mini">
      <el-form-item prop='accountId' label="账户ID" class="fl">
        <el-input  v-model="configData._id" size="mini" disabled style="width:280px;">
          <i slot="suffix" class="V7_iconfont V7_iconV7tubiao_fuzhi" @click="copyText(configData._id)"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop='secretKey' label="SecretKey" class="fl">
        <el-input  v-model="configData.sk" size="mini" disabled style="width:280px">
          <i slot="suffix" class="V7_iconfont V7_iconV7tubiao_fuzhi" @click="copyText(configData.sk)"></i>
        </el-input>
      </el-form-item>
      <span @click="restSecretKey('sk')" class="opera-span">重置</span>
    </el-form>
    <h5>身份验证</h5>
    <el-form class="m7-form clearfix" :model="dkFormData" label-position="top" size="mini">
      <el-form-item prop='url' label="校验接口" class="fl">
        <span slot="label">
          校验接口
          <el-tooltip class="item" effect="dark" content="post请求、请求参数token" placement="top">
            <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
          </el-tooltip>
        </span>
        <el-input  v-model="dkFormData.url" size="mini" disabled style="width:280px;">
          <i slot="suffix" class="V7_iconfont V7_iconV7tubiao_fuzhi" @click="copyText(dkFormData.url)"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop='dk' class="fl">
        <span slot="label">
          加密密钥
          <el-tooltip class="item" effect="dark" content="1.重置秘钥后座席重新登录生效。2.接收端需要同时更新秘钥，否则会导致解密失败" placement="top">
            <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
          </el-tooltip>
        </span>
        <el-input  v-model="dkFormData.dk" size="mini" disabled style="width:280px">
          <i slot="suffix" class="V7_iconfont V7_iconV7tubiao_fuzhi" @click="copyText(dkFormData.dk)"></i>
        </el-input>
      </el-form-item>
       <span @click="restSecretKey('dk')" class="opera-span">重置</span>
    </el-form>
  </div>
</template>

<script lang="ts">
import Clipboard from 'clipboard-js'
import { SystemConfigModule } from '@/store/modules/config/systemConfig'
import { Component, Vue } from 'vue-property-decorator'
interface ConfigData {
  _id: string
  sk: string
}
@Component({ name: 'interfaceConfig' })
export default class InterfaceConfig extends Vue {
  private $message: any
  private $confirm: any
  private configData: ConfigData = { _id: '', sk: '' }

  private dkFormData = { _id: '', dk: '', url: '' }

  private restSecretKey (type: string) { // 重置sk/dk
    const text = type === 'sk' ? '现有接口鉴权将失效,确定要重置吗' : '重置会导致当前秘钥失效'
    this.$confirm(text, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      SystemConfigModule.SystemCommonAction({ url: `/base/action/general/${type}/reset`, method: 'POST', data: {} }).then((res: any) => {
        if (res && res.success) {
          if (type === 'sk') {
            this.configData[type] = res.data ? res.data[type] : ''
          } else {
            this.dkFormData[type] = res.data ? res.data[type] : ''
          }
          this.$message.success('重置成功')
        }
      })
    }).catch(e => {
      console.log(e)
    })
  }

  private copyText (content: string) { // 复制
    Clipboard.copy(content).then(() => {
      this.$message.success('复制成功')
    }).catch(() => {
      this.$message.error('复制失败')
    })
  }

  private beforeMount () {
    const getSk = SystemConfigModule.SystemCommonAction({ url: '/base/action/general/sk/get', method: 'GET', data: {} })
    const getDk = SystemConfigModule.SystemCommonAction({ url: '/base/action/general/dk/get', method: 'GET', data: {} })
    Promise.all([getSk, getDk]).then(([skRes, dkRes]) => {
      if (skRes && skRes.success) {
        this.configData = skRes.data || {}
      }
      if (dkRes && dkRes.success) {
        this.dkFormData = dkRes.data || {}
        this.dkFormData.url = 'https://v7openapi.7moor.com/openapi/v1/auth/token/validate'
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.interface-box
  height calc(100% - 40px)
  box-shadow 0px 0px 3px 0px #E0E5F0, 0px 1px 4px 0px #E0E5F0
  border-radius 10px
  padding 16px
  overflow auto
  h5
    margin-bottom 22px
  .warn-text
    background $bgc-reminder
    padding 14px
    margin-bottom 20px
    border-radius 4px
    .el-icon-info
      color $c-warn
      padding-right 6px
      font-size 14px
      vertical-align middle
  .opera-span
    cursor pointer
    color $c-main
    font-size 12px
    padding 34px 0 0 16px
    display inline-block
  .label-box
    width 254px
    display block
  .V7_iconfont
    color $icon-gray
    cursor pointer
    padding-right 4px
    font-size 14px
    &:hover
      color $c-main
</style>
<style lang="stylus">
.interface-box
  .el-form-item
    width 30%
</style>
